<template>
  <div id="app">
    <!-- <bbt/> -->
    <!-- <shangpin/> -->
    <!-- <foot/> -->
    <component :is="coms[currentIndex]"> </component>
    <div class="tabbar">
      <span  @click="(currentIndex=index)" v-for="(item,index) in btns" :key="index" :class="{active:currentIndex==index}">{{item}}</span>
    </div>
  </div>
</template>

<script>
import bbt from './components/bbt.vue'
import shangpin from './components/shangpin.vue'
import dingdan from './components/dingdan.vue'
import my from './components/my.vue'
import foot from './components/foot.vue'
export default {
  name: 'App',
  data(){
    return{
      coms:[shangpin,bbt,dingdan,my],
      btns:['首页','爆爆团','订单','我的'],
      currentIndex:0,
    }
  },
  components:{
    bbt,
    shangpin,
    dingdan,
    foot,
    my,
  },
  methods:{
       btn(index){
        console.log(index);
        this.btnsIndex=index
       }
      },
}
</script>

<style>
*{
    margin: 0;
    padding: 0;
  }
  .tabbar{
    position:fixed;
    bottom: 0%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 50px;
    background-color: white;
    font-size: 14px;
  }
  .active{
    color: lightcoral;
  }
</style>
